<template>
    <div class="newsListNormal">
        <ul>
            <li @click="pathGo(item)" v-for="(item, index) in newsList">
                <div class="newsListLeft">
                    <h4>{{ item.digest }}</h4>
                    <span>{{ item.clicks || "0" }}阅读</span>
                </div>
                <div class="newsListRight">
                    <img :src="item.index_image_url" alt="" @error="imgError(index)" />
                </div>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { computed } from "vue";
import { undateUserWeb } from "@/request/index";
let router = useRouter();
const store = useStore();
let newsList = computed(() => {
    let allList = store.state.myRoute.newsList;
    allList = allList.filter((item) => {
        return item.hot != 1;
    });
    return allList;
});
let user_id = localStorage.getItem("token");
const pathGo = (x) => {
    // console.log(x.id, user_id, "comment");
    router.push({ path: "/newsDetail", query: { id: x.id } });
    undateUserWeb({ user_id, comment_db: "comment", comment_id: x.id, comment: x.digest }).then((data) => {
        // console.log("undateUserWeb", data);
    });
};
const imgError = (index) => {
    // console.log(111);
    newsList.value[index].index_image_url = "https://images.weserv.nl/?url=" + newsList.value[index].index_image_url;
    // console.log("https://images.weserv.nl/?url=" + newsList.value[index].index_image_url);
};
</script>
<style lang="scss">
@import "../static/style/variable.scss";
.newsListNormal {
    padding: 0 10px 50px;
    color: #333;
    .newsListLeft {
        width: 66%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    li {
        padding: 10px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        min-height: 80px;
        h4 {
            font-size: 17px;
            line-height: 20px;
            margin-bottom: 0.2rem;
        }
        span {
            font-size: 12px;
        }
    }
    .newsListRight {
        width: 30%;
        background-color: transparent;
        border-radius: 0.32rem;
        overflow: hidden;

        img {
            width: 100%;
            border-radius: 12px;
            object-fit: cover;
            max-height: 2.6667rem;
            background: url(@/static/images/jjz.webp) no-repeat center center;
            // max-height: 2.6667rem;
            background-size: cover;
        }
    }
}
</style>
